<!DOCTYPE html>
<html lang="en" dir="auto">

<head><script src="/livereload.js?mindelay=10&amp;v=2&amp;port=36288&amp;path=livereload" data-no-instant defer></script><meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="robots" content="noindex, nofollow">
<title>React 学习 | My New Hugo Site</title>
<meta name="keywords" content="">
<meta name="description" content="React 学习

第二节  卡片制作(jsx初步与css结合)
主要内容
目录结构:

Main.jsx:
import Card from &#34;./Card&#34;

function App(){
  return(
    &lt;&gt;
      &lt;Card/&gt;
      &lt;Card/&gt;
      &lt;Card/&gt;
    &lt;/&gt;
  )
}

export default App
Card.jsx:
import profilePic from &#39;./assets/MayCat.png&#39;;
function Card(){
    return (
        &lt;div className=&#34;card&#34;&gt;
            &lt;img className=&#34;card-image&#34; src={profilePic} alt=&#34;Picture&#34;&gt;&lt;/img&gt;
            &lt;h2 className=&#39;card-title&#39;&gt;Kang Jay&lt;/h2&gt;
            &lt;p className=&#39;card-text&#39;&gt;Creater&lt;/p&gt;
        &lt;/div&gt;
    )
}

export default Card;
index.css:
.card {
  border: 1px solid hsla(0, 0%, 77%, 0.712);
  border-radius: 8px;
  box-shadow: 5px 5px 10px hsla(0, 0%, 72%, 0.712);
  padding: 20px;
  margin: 10px;
  text-align: center;
  max-width: 250px;
  display: inline-block;
} 
.card .card-image {
  max-width: 60%;
  height: auto;
  border-radius: 50%;
  margin: 10px;
}
.card .card-title {
  font-family: Arial, Helvetica, sans-serif;
  color: hsl(0, 0%, 27%);
  margin: 10px 0;
}
.card .card-text {
  font-family: Arial, Helvetica, sans-serif;
  color: hsl(0, 0%, 41%);
  margin: 10px 0;
}
结果展示

需要注意的细节
jsx文件中只能返回一个components, 注意用 &lt;&gt;&lt;/&gt; 包裹起来
jsx的本质是定义一个函数然后使用这个函数export出来的component 底层原理还有待考究~
jsx调用css里面的class需要使用className比如 &lt;img className=&#39;card-image&#39;&gt;

css中边框从外到里是MBP: margin-&gt;border-&gt;padding(该元素与外界的距离-&gt;该元素边框-&gt;该元素与child的距离)
css中 border-radius: 50% 变圆
css中 display: inline-block 是一个个可以自己控制大小的块, 而flex无法自己控制大小会按照父元素大小变化
总结
基础, 像拼积木">
<meta name="author" content="">
<link rel="canonical" href="http://localhost:36288/react-%E5%AD%A6%E4%B9%A0/">
<link crossorigin="anonymous" href="/assets/css/stylesheet.6da9a63d25a9608bca2f7f907a030e887a7dd3c3f3918e4cc113129361414bda.css" integrity="sha256-bammPSWpYIvKL3&#43;QegMOiHp908PzkY5MwRMSk2FBS9o=" rel="preload stylesheet" as="style">
<link rel="icon" href="http://localhost:36288/favicon.ico">
<link rel="icon" type="image/png" sizes="16x16" href="http://localhost:36288/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="http://localhost:36288/favicon-32x32.png">
<link rel="apple-touch-icon" href="http://localhost:36288/apple-touch-icon.png">
<link rel="mask-icon" href="http://localhost:36288/safari-pinned-tab.svg">
<meta name="theme-color" content="#2e2e33">
<meta name="msapplication-TileColor" content="#2e2e33">
<link rel="alternate" hreflang="en" href="http://localhost:36288/react-%E5%AD%A6%E4%B9%A0/">
<noscript>
    <style>
        #theme-toggle,
        .top-link {
            display: none;
        }

    </style>
    <style>
        @media (prefers-color-scheme: dark) {
            :root {
                --theme: rgb(29, 30, 32);
                --entry: rgb(46, 46, 51);
                --primary: rgb(218, 218, 219);
                --secondary: rgb(155, 156, 157);
                --tertiary: rgb(65, 66, 68);
                --content: rgb(196, 196, 197);
                --code-block-bg: rgb(46, 46, 51);
                --code-bg: rgb(55, 56, 62);
                --border: rgb(51, 51, 51);
            }

            .list {
                background: var(--theme);
            }

            .list:not(.dark)::-webkit-scrollbar-track {
                background: 0 0;
            }

            .list:not(.dark)::-webkit-scrollbar-thumb {
                border-color: var(--theme);
            }
        }

    </style>
</noscript>
</head>

<body class="" id="top">
<script>
    if (localStorage.getItem("pref-theme") === "dark") {
        document.body.classList.add('dark');
    } else if (localStorage.getItem("pref-theme") === "light") {
        document.body.classList.remove('dark')
    } else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
        document.body.classList.add('dark');
    }

</script>

<header class="header">
    <nav class="nav">
        <div class="logo">
            <a href="http://localhost:36288/" accesskey="h" title="My New Hugo Site (Alt + H)">My New Hugo Site</a>
            <div class="logo-switches">
                <button id="theme-toggle" accesskey="t" title="(Alt + T)" aria-label="Toggle theme">
                    <svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24"
                        fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                        stroke-linejoin="round">
                        <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
                    </svg>
                    <svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24"
                        fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                        stroke-linejoin="round">
                        <circle cx="12" cy="12" r="5"></circle>
                        <line x1="12" y1="1" x2="12" y2="3"></line>
                        <line x1="12" y1="21" x2="12" y2="23"></line>
                        <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
                        <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
                        <line x1="1" y1="12" x2="3" y2="12"></line>
                        <line x1="21" y1="12" x2="23" y2="12"></line>
                        <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
                        <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
                    </svg>
                </button>
            </div>
        </div>
        <ul id="menu">
            <li>
                <a href="http://localhost:36288/" title="首页">
                    <span>首页</span>
                </a>
            </li>
            <li>
                <a href="http://localhost:36288/about/" title="关于">
                    <span>关于</span>
                </a>
            </li>
        </ul>
    </nav>
</header>
<main class="main">

<article class="post-single">
  <header class="post-header">
    <div class="breadcrumbs"><a href="http://localhost:36288/">Home</a></div>
    <h1 class="post-title entry-hint-parent">
      React 学习
    </h1>
    <div class="post-meta"><span title='2024-05-02 12:00:00 +0800 CST'>May 2, 2024</span>&nbsp;·&nbsp;4 min&nbsp;·&nbsp;778 words

</div>
  </header> <div class="toc">
    <details >
        <summary accesskey="c" title="(Alt + C)">
            <span class="details">Table of Contents</span>
        </summary>

        <div class="inner"><ul>
                <li>
                    <a href="#react-%e5%ad%a6%e4%b9%a0" aria-label="React 学习">React 学习</a><ul>
                        <ul>
                        
                <li>
                    <a href="#%e7%ac%ac%e4%ba%8c%e8%8a%82--%e5%8d%a1%e7%89%87%e5%88%b6%e4%bd%9cjsx%e5%88%9d%e6%ad%a5%e4%b8%8ecss%e7%bb%93%e5%90%88" aria-label="第二节  卡片制作(jsx初步与css结合)">第二节  卡片制作(jsx初步与css结合)</a><ul>
                        <ul>
                        
                <li>
                    <a href="#%e4%b8%bb%e8%a6%81%e5%86%85%e5%ae%b9" aria-label="主要内容">主要内容</a></li>
                <li>
                    <a href="#%e7%bb%93%e6%9e%9c%e5%b1%95%e7%a4%ba" aria-label="结果展示">结果展示</a></li>
                <li>
                    <a href="#%e9%9c%80%e8%a6%81%e6%b3%a8%e6%84%8f%e7%9a%84%e7%bb%86%e8%8a%82" aria-label="需要注意的细节">需要注意的细节</a></li>
                <li>
                    <a href="#%e6%80%bb%e7%bb%93" aria-label="总结">总结</a></li></ul>
                    </ul>
                </li>
                <li>
                    <a href="#%e7%ac%ac%e4%b8%89%e8%8a%82-css%e5%a6%82%e4%bd%95%e5%ba%94%e7%94%a8%e7%bb%99%e7%bb%84%e4%bb%b6%e4%b8%89%e7%a7%8d%e5%ba%94%e7%94%a8%e6%96%b9%e6%b3%95" aria-label="第三节 css如何应用给组件(三种应用方法)">第三节 css如何应用给组件(三种应用方法)</a><ul>
                        <ul>
                        
                <li>
                    <a href="#%e4%b8%bb%e8%a6%81%e5%86%85%e5%ae%b9-1" aria-label="主要内容">主要内容</a></li>
                <li>
                    <a href="#%e9%9c%80%e8%a6%81%e6%b3%a8%e6%84%8f%e7%9a%84%e7%bb%86%e8%8a%82-1" aria-label="需要注意的细节">需要注意的细节</a></li>
                <li>
                    <a href="#%e6%80%bb%e7%bb%93-1" aria-label="总结">总结</a></li></ul>
                    </ul>
                </li>
                <li>
                    <a href="#%e7%ac%ac%e5%9b%9b%e8%8a%82" aria-label="第四节">第四节</a></li>
                <li>
                    <a href="#%e7%ac%ac%e4%ba%94%e8%8a%82" aria-label="第五节">第五节</a></li>
                <li>
                    <a href="#%e7%ac%ac%e5%85%ad%e8%8a%82" aria-label="第六节">第六节</a></li>
                <li>
                    <a href="#%e7%ac%ac%e4%b8%83%e8%8a%82" aria-label="第七节">第七节</a></li>
                <li>
                    <a href="#%e7%ac%ac%e5%85%ab%e8%8a%82" aria-label="第八节">第八节</a></li>
                <li>
                    <a href="#%e7%ac%ac%e4%b9%9d%e8%8a%82" aria-label="第九节">第九节</a><ul>
                        
                <li>
                    <a href="#%e7%ac%ac%e5%8d%81%e8%8a%82" aria-label="第十节">第十节</a></li></ul>
                </li>
                <li>
                    <a href="#%e7%ac%ac%e5%8d%81%e4%b8%80%e8%8a%82" aria-label="第十一节">第十一节</a></li>
                <li>
                    <a href="#%e7%ac%ac%e5%8d%81%e4%ba%8c%e8%8a%82" aria-label="第十二节">第十二节</a></li>
                <li>
                    <a href="#%e7%ac%ac%e5%8d%81%e4%b8%89%e8%8a%82" aria-label="第十三节">第十三节</a></li>
                <li>
                    <a href="#%e7%ac%ac%e5%8d%81%e5%9b%9b%e8%8a%82" aria-label="第十四节">第十四节</a></li>
                <li>
                    <a href="#%e7%ac%ac%e5%8d%81%e4%ba%94%e8%8a%82" aria-label="第十五节">第十五节</a></li>
                <li>
                    <a href="#%e7%ac%ac%e5%8d%81%e5%85%ad%e8%8a%82" aria-label="第十六节">第十六节</a></li>
                <li>
                    <a href="#%e7%ac%ac%e5%8d%81%e4%b8%83%e8%8a%82" aria-label="第十七节">第十七节</a></li>
                <li>
                    <a href="#%e7%ac%ac%e5%8d%81%e5%85%ab%e8%8a%82" aria-label="第十八节">第十八节</a></li>
                <li>
                    <a href="#%e7%ac%ac%e5%8d%81%e4%b9%9d%e8%8a%82" aria-label="第十九节">第十九节</a></li>
                <li>
                    <a href="#%e7%ac%ac%e4%ba%8c%e5%8d%81%e8%8a%82" aria-label="第二十节">第二十节</a>
                </li>
            </ul>
            </ul>
            </li>
            </ul>
        </div>
    </details>
</div>

  <div class="post-content"><h1 id="react-学习">React 学习<a hidden class="anchor" aria-hidden="true" href="#react-学习">#</a></h1>
<hr>
<h3 id="第二节--卡片制作jsx初步与css结合">第二节  卡片制作(jsx初步与css结合)<a hidden class="anchor" aria-hidden="true" href="#第二节--卡片制作jsx初步与css结合">#</a></h3>
<h5 id="主要内容">主要内容<a hidden class="anchor" aria-hidden="true" href="#主要内容">#</a></h5>
<p>目录结构:</p>
<p><img alt="image-20250406173827128" loading="lazy" src="c:\\Users\\21147\\AppData\\Roaming\\Typora\\typora-user-images\\image-20250406173827128.png"></p>
<p>Main.jsx:</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-jsx" data-lang="jsx"><span style="display:flex;"><span><span style="color:#66d9ef">import</span> <span style="color:#a6e22e">Card</span> <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#34;./Card&#34;</span>
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">function</span> <span style="color:#a6e22e">App</span>(){
</span></span><span style="display:flex;"><span>  <span style="color:#66d9ef">return</span>(
</span></span><span style="display:flex;"><span>    &lt;&gt;
</span></span><span style="display:flex;"><span>      &lt;<span style="color:#f92672">Card</span>/&gt;
</span></span><span style="display:flex;"><span>      &lt;<span style="color:#f92672">Card</span>/&gt;
</span></span><span style="display:flex;"><span>      &lt;<span style="color:#f92672">Card</span>/&gt;
</span></span><span style="display:flex;"><span>    &lt;/&gt;
</span></span><span style="display:flex;"><span>  )
</span></span><span style="display:flex;"><span>}
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">export</span> <span style="color:#66d9ef">default</span> <span style="color:#a6e22e">App</span>
</span></span></code></pre></div><p>Card.jsx:</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-jsx" data-lang="jsx"><span style="display:flex;"><span><span style="color:#66d9ef">import</span> <span style="color:#a6e22e">profilePic</span> <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;./assets/MayCat.png&#39;</span>;
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">function</span> <span style="color:#a6e22e">Card</span>(){
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">return</span> (
</span></span><span style="display:flex;"><span>        &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">className</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;card&#34;</span>&gt;
</span></span><span style="display:flex;"><span>            &lt;<span style="color:#f92672">img</span> <span style="color:#a6e22e">className</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;card-image&#34;</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">profilePic</span>} <span style="color:#a6e22e">alt</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;Picture&#34;</span>&gt;&lt;/<span style="color:#f92672">img</span>&gt;
</span></span><span style="display:flex;"><span>            &lt;<span style="color:#f92672">h2</span> <span style="color:#a6e22e">className</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#39;card-title&#39;</span>&gt;<span style="color:#a6e22e">Kang</span> <span style="color:#a6e22e">Jay</span>&lt;/<span style="color:#f92672">h2</span>&gt;
</span></span><span style="display:flex;"><span>            &lt;<span style="color:#f92672">p</span> <span style="color:#a6e22e">className</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#39;card-text&#39;</span>&gt;<span style="color:#a6e22e">Creater</span>&lt;/<span style="color:#f92672">p</span>&gt;
</span></span><span style="display:flex;"><span>        &lt;/<span style="color:#f92672">div</span>&gt;
</span></span><span style="display:flex;"><span>    )
</span></span><span style="display:flex;"><span>}
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">export</span> <span style="color:#66d9ef">default</span> <span style="color:#a6e22e">Card</span>;
</span></span></code></pre></div><p>index.css:</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-css" data-lang="css"><span style="display:flex;"><span>.<span style="color:#a6e22e">card</span> {
</span></span><span style="display:flex;"><span>  <span style="color:#66d9ef">border</span>: <span style="color:#ae81ff">1</span><span style="color:#66d9ef">px</span> <span style="color:#66d9ef">solid</span> hsla(<span style="color:#ae81ff">0</span>, <span style="color:#ae81ff">0</span><span style="color:#66d9ef">%</span>, <span style="color:#ae81ff">77</span><span style="color:#66d9ef">%</span>, <span style="color:#ae81ff">0.712</span>);
</span></span><span style="display:flex;"><span>  <span style="color:#66d9ef">border-radius</span>: <span style="color:#ae81ff">8</span><span style="color:#66d9ef">px</span>;
</span></span><span style="display:flex;"><span>  <span style="color:#66d9ef">box-shadow</span>: <span style="color:#ae81ff">5</span><span style="color:#66d9ef">px</span> <span style="color:#ae81ff">5</span><span style="color:#66d9ef">px</span> <span style="color:#ae81ff">10</span><span style="color:#66d9ef">px</span> hsla(<span style="color:#ae81ff">0</span>, <span style="color:#ae81ff">0</span><span style="color:#66d9ef">%</span>, <span style="color:#ae81ff">72</span><span style="color:#66d9ef">%</span>, <span style="color:#ae81ff">0.712</span>);
</span></span><span style="display:flex;"><span>  <span style="color:#66d9ef">padding</span>: <span style="color:#ae81ff">20</span><span style="color:#66d9ef">px</span>;
</span></span><span style="display:flex;"><span>  <span style="color:#66d9ef">margin</span>: <span style="color:#ae81ff">10</span><span style="color:#66d9ef">px</span>;
</span></span><span style="display:flex;"><span>  <span style="color:#66d9ef">text-align</span>: <span style="color:#66d9ef">center</span>;
</span></span><span style="display:flex;"><span>  <span style="color:#66d9ef">max-width</span>: <span style="color:#ae81ff">250</span><span style="color:#66d9ef">px</span>;
</span></span><span style="display:flex;"><span>  <span style="color:#66d9ef">display</span>: <span style="color:#66d9ef">inline-block</span>;
</span></span><span style="display:flex;"><span>} 
</span></span><span style="display:flex;"><span>.<span style="color:#a6e22e">card</span> .<span style="color:#a6e22e">card-image</span> {
</span></span><span style="display:flex;"><span>  <span style="color:#66d9ef">max-width</span>: <span style="color:#ae81ff">60</span><span style="color:#66d9ef">%</span>;
</span></span><span style="display:flex;"><span>  <span style="color:#66d9ef">height</span>: <span style="color:#66d9ef">auto</span>;
</span></span><span style="display:flex;"><span>  <span style="color:#66d9ef">border-radius</span>: <span style="color:#ae81ff">50</span><span style="color:#66d9ef">%</span>;
</span></span><span style="display:flex;"><span>  <span style="color:#66d9ef">margin</span>: <span style="color:#ae81ff">10</span><span style="color:#66d9ef">px</span>;
</span></span><span style="display:flex;"><span>}
</span></span><span style="display:flex;"><span>.<span style="color:#a6e22e">card</span> .<span style="color:#a6e22e">card-title</span> {
</span></span><span style="display:flex;"><span>  <span style="color:#66d9ef">font-family</span>: Arial, Helvetica, <span style="color:#66d9ef">sans-serif</span>;
</span></span><span style="display:flex;"><span>  <span style="color:#66d9ef">color</span>: hsl(<span style="color:#ae81ff">0</span>, <span style="color:#ae81ff">0</span><span style="color:#66d9ef">%</span>, <span style="color:#ae81ff">27</span><span style="color:#66d9ef">%</span>);
</span></span><span style="display:flex;"><span>  <span style="color:#66d9ef">margin</span>: <span style="color:#ae81ff">10</span><span style="color:#66d9ef">px</span> <span style="color:#ae81ff">0</span>;
</span></span><span style="display:flex;"><span>}
</span></span><span style="display:flex;"><span>.<span style="color:#a6e22e">card</span> .<span style="color:#a6e22e">card-text</span> {
</span></span><span style="display:flex;"><span>  <span style="color:#66d9ef">font-family</span>: Arial, Helvetica, <span style="color:#66d9ef">sans-serif</span>;
</span></span><span style="display:flex;"><span>  <span style="color:#66d9ef">color</span>: hsl(<span style="color:#ae81ff">0</span>, <span style="color:#ae81ff">0</span><span style="color:#66d9ef">%</span>, <span style="color:#ae81ff">41</span><span style="color:#66d9ef">%</span>);
</span></span><span style="display:flex;"><span>  <span style="color:#66d9ef">margin</span>: <span style="color:#ae81ff">10</span><span style="color:#66d9ef">px</span> <span style="color:#ae81ff">0</span>;
</span></span><span style="display:flex;"><span>}
</span></span></code></pre></div><h5 id="结果展示">结果展示<a hidden class="anchor" aria-hidden="true" href="#结果展示">#</a></h5>
<!-- raw HTML omitted -->
<h5 id="需要注意的细节">需要注意的细节<a hidden class="anchor" aria-hidden="true" href="#需要注意的细节">#</a></h5>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-txt" data-lang="txt"><span style="display:flex;"><span>jsx文件中只能返回一个components, 注意用 &lt;&gt;&lt;/&gt; 包裹起来
</span></span><span style="display:flex;"><span>jsx的本质是定义一个函数然后使用这个函数export出来的component 底层原理还有待考究~
</span></span><span style="display:flex;"><span>jsx调用css里面的class需要使用className比如 &lt;img className=&#39;card-image&#39;&gt;
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>css中边框从外到里是MBP: margin-&gt;border-&gt;padding(该元素与外界的距离-&gt;该元素边框-&gt;该元素与child的距离)
</span></span><span style="display:flex;"><span>css中 border-radius: 50% 变圆
</span></span><span style="display:flex;"><span>css中 display: inline-block 是一个个可以自己控制大小的块, 而flex无法自己控制大小会按照父元素大小变化
</span></span></code></pre></div><h5 id="总结">总结<a hidden class="anchor" aria-hidden="true" href="#总结">#</a></h5>
<p>基础, 像拼积木</p>
<hr>
<h3 id="第三节-css如何应用给组件三种应用方法">第三节 css如何应用给组件(三种应用方法)<a hidden class="anchor" aria-hidden="true" href="#第三节-css如何应用给组件三种应用方法">#</a></h3>
<h5 id="主要内容-1">主要内容<a hidden class="anchor" aria-hidden="true" href="#主要内容-1">#</a></h5>
<p>External 全局引入</p>
<p><img alt="image-20250406182524034" loading="lazy" src="c:\\Users\\21147\\AppData\\Roaming\\Typora\\typora-user-images\\image-20250406182524034.png"></p>
<p>Modules 模块化</p>
<p><img alt="image-20250406183211134" loading="lazy" src="c:\\Users\\21147\\AppData\\Roaming\\Typora\\typora-user-images\\image-20250406183211134.png"></p>
<p>Inline 内联</p>
<p><img alt="```" loading="lazy" src="c:\\Users\\21147\\AppData\\Roaming\\Typora\\typora-user-images\\image-20250406184044341.png"></p>
<p>(注意需要驼峰命名法)</p>
<h5 id="需要注意的细节-1">需要注意的细节<a hidden class="anchor" aria-hidden="true" href="#需要注意的细节-1">#</a></h5>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-txt" data-lang="txt"><span style="display:flex;"><span>一共有三种css修饰react方式: 
</span></span><span style="display:flex;"><span>External(使用全局修饰方式, 易冲突, 适合很小项目) 
</span></span><span style="display:flex;"><span>Moudules(将botton.jsx和button.moudles.css放在一个button文件夹里, 需要创建文件夹以及import等其他操作, 适合大型项目区分组件) 
</span></span><span style="display:flex;"><span>&gt; 需要从css中导入style之后调用style里面的class作为className
</span></span><span style="display:flex;"><span>Inline(将css直接放在jsx文件里面使用动态变量存储, 可读性不高, 适合css比较少的单独组件)
</span></span><span style="display:flex;"><span>&gt; 只需要一个jsx文件但是更改style(需要是对象, 值都是字符串, 符号都是逗号, 需要驼峰命名法)比较复杂
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>css中如果有两个参数是先左右后上下, 并且中间是空格 比如 padding: 10px 20px;
</span></span></code></pre></div><h5 id="总结-1">总结<a hidden class="anchor" aria-hidden="true" href="#总结-1">#</a></h5>
<p>三种, 构建大型项目使用Moudules, 小型External, 小按钮Inline</p>
<h3 id="第四节">第四节<a hidden class="anchor" aria-hidden="true" href="#第四节">#</a></h3>
<p>props的作用, 用于父文件给子文件传输数据</p>
<p>propTypes/ defaultProps 一般用于给元素添加类型限制以及默认内容, 如果违反了会导致Warning</p>
<h3 id="第五节">第五节<a hidden class="anchor" aria-hidden="true" href="#第五节">#</a></h3>
<p>进行有条件渲染, 一般通过父元素经过props传入的bool属性实现对两种const的选择. const的内容包括元素及通过className实现的css样式.</p>
<h3 id="第六节">第六节<a hidden class="anchor" aria-hidden="true" href="#第六节">#</a></h3>
<p>进行列表渲染, 将列表中放入object, 通过.map()或者.filter()方法实现内容丰富</p>
<h3 id="第七节">第七节<a hidden class="anchor" aria-hidden="true" href="#第七节">#</a></h3>
<p>实现点击后的事件处理. 元素中使用onclick = {回调函数} 的语法, 回调函数中包含对事件的处理. 如果需要更改内容等涉及到元素本身性质的操作需要在回调函数中传入参数e然后对e的属性进行更改.</p>
<h3 id="第八节">第八节<a hidden class="anchor" aria-hidden="true" href="#第八节">#</a></h3>
<p>一个常用的React hook: useState() 允许创建一个状态变量, 并提供一个封装好的setter函数用于更新变量的值实现及时渲染</p>
<p>使用方法:</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-react" data-lang="react"><span style="display:flex;"><span><span style="color:#66d9ef">import</span> <span style="color:#a6e22e">React</span>, {<span style="color:#a6e22e">useState</span>} <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;react&#39;</span>;
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">function</span> <span style="color:#a6e22e">fun</span>(){
</span></span><span style="display:flex;"><span>    <span style="color:#75715e">// 列表解构useState
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>    <span style="color:#66d9ef">const</span> [<span style="color:#a6e22e">count</span>, <span style="color:#a6e22e">setCount</span>] <span style="color:#f92672">=</span> <span style="color:#a6e22e">useState</span>(<span style="color:#e6db74">&#34;默认参数&#34;</span>)
</span></span><span style="display:flex;"><span>    <span style="color:#75715e">// 定义回调函数
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>    <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">resetCount</span> <span style="color:#f92672">=</span> () =&gt; {
</span></span><span style="display:flex;"><span>        <span style="color:#a6e22e">setCount</span>(<span style="color:#ae81ff">0</span>)
</span></span><span style="display:flex;"><span>    }
</span></span><span style="display:flex;"><span>    <span style="color:#75715e">// 返回一个onClick元素
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>    <span style="color:#66d9ef">return</span> &lt;<span style="color:#f92672">button</span> <span style="color:#a6e22e">value</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">count</span>} <span style="color:#a6e22e">onClick</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">resetCount</span>}&gt; <span style="color:#a6e22e">Reset</span> <span style="color:#a6e22e">Count</span> &lt;/<span style="color:#f92672">button</span>&gt;
</span></span><span style="display:flex;"><span>    &lt;<span style="color:#f92672">p</span>&gt;<span style="color:#a6e22e">Count</span><span style="color:#f92672">:</span> {<span style="color:#a6e22e">count</span>}&lt;/<span style="color:#f92672">p</span>&gt;
</span></span><span style="display:flex;"><span>}
</span></span></code></pre></div><h3 id="第九节">第九节<a hidden class="anchor" aria-hidden="true" href="#第九节">#</a></h3>
<p>onChange 一个event handler, 在input/textarea/select/radio元素中使用</p>
<p>使用方法:</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-react" data-lang="react"><span style="display:flex;"><span><span style="color:#66d9ef">import</span> <span style="color:#a6e22e">React</span>, {<span style="color:#a6e22e">useState</span>} <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;react&#39;</span>;
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">function</span> <span style="color:#a6e22e">MyComponent</span>(){
</span></span><span style="display:flex;"><span>	<span style="color:#75715e">// 封装有关元素更改的事件函数
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>    <span style="color:#66d9ef">const</span> [<span style="color:#a6e22e">shipping</span>, <span style="color:#a6e22e">setshipping</span>] <span style="color:#f92672">=</span> <span style="color:#a6e22e">useState</span>(<span style="color:#e6db74">&#34;Default&#34;</span>)
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">function</span> <span style="color:#a6e22e">shippingChange</span>(<span style="color:#a6e22e">event</span>){
</span></span><span style="display:flex;"><span>        <span style="color:#a6e22e">setshipping</span>(<span style="color:#a6e22e">event</span>.<span style="color:#a6e22e">target</span>.<span style="color:#a6e22e">value</span>);
</span></span><span style="display:flex;"><span>    }
</span></span><span style="display:flex;"><span>    <span style="color:#75715e">// 返回一个input/textarea/select元素
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>    <span style="color:#66d9ef">return</span> &lt;<span style="color:#f92672">input</span> <span style="color:#a6e22e">value</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">shipping</span>} <span style="color:#a6e22e">onChange</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">setshipping</span>} /&gt;
</span></span><span style="display:flex;"><span>    &lt;<span style="color:#f92672">p</span>&gt;<span style="color:#a6e22e">Shipping</span><span style="color:#f92672">:</span> {<span style="color:#a6e22e">shipping</span>}&lt;/<span style="color:#f92672">p</span>&gt;
</span></span><span style="display:flex;"><span>}
</span></span></code></pre></div><h4 id="第十节">第十节<a hidden class="anchor" aria-hidden="true" href="#第十节">#</a></h4>
<p>通过onChange事件处理实现调色板选择</p>
<p>代码示例:</p>
<p><img alt="image-20250503181714023" loading="lazy" src="./attachments/image-20250503181714023.png"></p>
<h3 id="第十一节">第十一节<a hidden class="anchor" aria-hidden="true" href="#第十一节">#</a></h3>
<p>通过setCount()函数中添加箭头函数(updater function)实现对前面状态的更改. 避免产生由于并行操作导致多次调用函数但是表面上只成功执行一次的问题.</p>
<p><img alt="image-20250503185242272" loading="lazy" src="./attachments/image-20250503185242272.png"></p>
<h3 id="第十二节">第十二节<a hidden class="anchor" aria-hidden="true" href="#第十二节">#</a></h3>
<p>通过useState实现对对象的即时更改. 通过在setObject()函数中使用拓展符保持object中其他属性的原始值.</p>
<p><img alt="image-20250503185633108" loading="lazy" src="./attachments/image-20250503185633108.png"></p>
<p><img alt="image-20250503190329577" loading="lazy" src="./attachments/image-20250503190329577.png"></p>
<h3 id="第十三节">第十三节<a hidden class="anchor" aria-hidden="true" href="#第十三节">#</a></h3>
<p>使用useState实现对数组的及时更改. 通过onclick()和setFoods()+filter()实现元素删除, 通过document.getElementById(&ldquo;Id&rdquo;).value实现传值及清空输入, 通过setFoods(f =&gt; [&hellip;f, newFood])实现添加食物</p>
<p><img alt="image-20250503200826466" loading="lazy" src="./attachments/image-20250503200826466.png"></p>
<p><img alt="image-20250503200859914" loading="lazy" src="./attachments/image-20250503200859914.png"></p>
<p><img alt="image-20250503201010620" loading="lazy" src="./attachments/image-20250503201010620.png"></p>
<h3 id="第十四节">第十四节<a hidden class="anchor" aria-hidden="true" href="#第十四节">#</a></h3>
<p>object列表处理</p>
<p><img alt="image-20250503210121152" loading="lazy" src="./attachments/image-20250503210121152.png"></p>
<p><img alt="image-20250503210155649" loading="lazy" src="./attachments/image-20250503210155649.png"></p>
<p><img alt="image-20250503210059700" loading="lazy" src="./attachments/image-20250503210059700.png"></p>
<h3 id="第十五节">第十五节<a hidden class="anchor" aria-hidden="true" href="#第十五节">#</a></h3>
<p>To-Do-List 项目</p>
<p><img alt="image-20250503210708790" loading="lazy" src="./attachments/image-20250503210708790.png"></p>
<p><img alt="image-20250503211708163" loading="lazy" src="./attachments/image-20250503211708163.png"></p>
<p>上面进行了检验空值的操作.</p>
<p><img alt="image-20250503211920410" loading="lazy" src="./attachments/image-20250503211920410.png"></p>
<p><img alt="image-20250503212121429" loading="lazy" src="./attachments/image-20250503212121429.png"></p>
<p><img alt="image-20250503210603167" loading="lazy" src="./attachments/image-20250503210603167.png"></p>
<p>下面是ol中的内容</p>
<p><img alt="image-20250503205506531" loading="lazy" src="./attachments/image-20250503205506531.png"></p>
<h3 id="第十六节">第十六节<a hidden class="anchor" aria-hidden="true" href="#第十六节">#</a></h3>
<p>useEffect() hook</p>
<h3 id="第十七节">第十七节<a hidden class="anchor" aria-hidden="true" href="#第十七节">#</a></h3>
<p>项目: 钟表</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-react" data-lang="react"><span style="display:flex;"><span><span style="color:#66d9ef">import</span> <span style="color:#a6e22e">DigitalClock</span> <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;./DigitalClock.jsx&#39;</span>;
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">function</span> <span style="color:#a6e22e">App</span>() {
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">return</span> ( &lt;<span style="color:#f92672">DigitalClock</span>/&gt;)
</span></span><span style="display:flex;"><span>}
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">export</span> <span style="color:#66d9ef">default</span> <span style="color:#a6e22e">App</span>
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">import</span> <span style="color:#a6e22e">React</span>, {<span style="color:#a6e22e">useState</span>, <span style="color:#a6e22e">useEffect</span>} <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;react&#39;</span>;
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">function</span> <span style="color:#a6e22e">DigitalClock</span>(){
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">const</span> [<span style="color:#a6e22e">time</span>, <span style="color:#a6e22e">setTime</span>] <span style="color:#f92672">=</span> <span style="color:#a6e22e">useState</span>(<span style="color:#66d9ef">new</span> Date());
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">useEffect</span>(() =&gt; {
</span></span><span style="display:flex;"><span>        <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">intervalId</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">setInterval</span>(() =&gt; {
</span></span><span style="display:flex;"><span>            <span style="color:#a6e22e">setTime</span>(<span style="color:#66d9ef">new</span> Date());
</span></span><span style="display:flex;"><span>        }, <span style="color:#ae81ff">1000</span>);
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>        <span style="color:#66d9ef">return</span> () =&gt; {
</span></span><span style="display:flex;"><span>            <span style="color:#a6e22e">clearInterval</span>(<span style="color:#a6e22e">intervalId</span>);
</span></span><span style="display:flex;"><span>        }
</span></span><span style="display:flex;"><span>    }, []);
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">function</span> <span style="color:#a6e22e">formatTime</span>(){
</span></span><span style="display:flex;"><span>        <span style="color:#66d9ef">let</span> <span style="color:#a6e22e">hours</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">time</span>.<span style="color:#a6e22e">getHours</span>();
</span></span><span style="display:flex;"><span>        <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">minutes</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">time</span>.<span style="color:#a6e22e">getMinutes</span>();
</span></span><span style="display:flex;"><span>        <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">seconds</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">time</span>.<span style="color:#a6e22e">getSeconds</span>();
</span></span><span style="display:flex;"><span>        <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">meridiem</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">hours</span> <span style="color:#f92672">&gt;=</span> <span style="color:#ae81ff">12</span> <span style="color:#f92672">?</span> <span style="color:#e6db74">&#34;PM&#34;</span> <span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;AM&#34;</span>;
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>        <span style="color:#a6e22e">hours</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">hours</span> <span style="color:#f92672">%</span> <span style="color:#ae81ff">12</span> <span style="color:#f92672">||</span> <span style="color:#ae81ff">12</span>;
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>        <span style="color:#66d9ef">return</span> <span style="color:#e6db74">`</span><span style="color:#e6db74">${</span><span style="color:#a6e22e">padZero</span>(<span style="color:#a6e22e">hours</span>)<span style="color:#e6db74">}</span><span style="color:#e6db74">:</span><span style="color:#e6db74">${</span><span style="color:#a6e22e">padZero</span>(<span style="color:#a6e22e">minutes</span>)<span style="color:#e6db74">}</span><span style="color:#e6db74">:</span><span style="color:#e6db74">${</span><span style="color:#a6e22e">padZero</span>(<span style="color:#a6e22e">seconds</span>)<span style="color:#e6db74">}</span><span style="color:#e6db74"> </span><span style="color:#e6db74">${</span><span style="color:#a6e22e">meridiem</span><span style="color:#e6db74">}</span><span style="color:#e6db74">`</span>;
</span></span><span style="display:flex;"><span>    }
</span></span><span style="display:flex;"><span>    
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">function</span> <span style="color:#a6e22e">padZero</span>(<span style="color:#a6e22e">number</span>){
</span></span><span style="display:flex;"><span>        <span style="color:#66d9ef">return</span> (<span style="color:#a6e22e">number</span> <span style="color:#f92672">&lt;</span> <span style="color:#ae81ff">10</span> <span style="color:#f92672">?</span> <span style="color:#e6db74">&#34;0&#34;</span> <span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;&#34;</span>) <span style="color:#f92672">+</span> <span style="color:#a6e22e">number</span>;
</span></span><span style="display:flex;"><span>    }
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">return</span>(
</span></span><span style="display:flex;"><span>        &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">className</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;clock-container&#34;</span>&gt;
</span></span><span style="display:flex;"><span>            &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">className</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;clock&#34;</span>&gt;
</span></span><span style="display:flex;"><span>                &lt;<span style="color:#f92672">span</span>&gt;{<span style="color:#a6e22e">formatTime</span>()}&lt;/<span style="color:#f92672">span</span>&gt;
</span></span><span style="display:flex;"><span>            &lt;/<span style="color:#f92672">div</span>&gt;
</span></span><span style="display:flex;"><span>        &lt;/<span style="color:#f92672">div</span>&gt;
</span></span><span style="display:flex;"><span>    );
</span></span><span style="display:flex;"><span>}
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">export</span> <span style="color:#66d9ef">default</span> <span style="color:#a6e22e">DigitalClock</span>;
</span></span></code></pre></div><div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-css" data-lang="css"><span style="display:flex;"><span><span style="color:#f92672">body</span>{
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">background-image</span>: url(<span style="color:#e6db74">assets/background.jpg</span>);
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">background-position</span>: <span style="color:#66d9ef">center</span>;
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">background-repeat</span>: <span style="color:#66d9ef">no-repeat</span>;
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">background-size</span>: <span style="color:#66d9ef">cover</span>;
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">background-attachment</span>: <span style="color:#66d9ef">fixed</span>;
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">margin</span>: <span style="color:#ae81ff">0</span>;
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>    <span style="color:#75715e">/* OPTIONAL */</span>
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">display</span>: <span style="color:#66d9ef">flex</span>;
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">justify-content</span>: <span style="color:#66d9ef">center</span>;
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">min-height</span>: <span style="color:#ae81ff">100</span><span style="color:#66d9ef">vh</span>;
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">align-items</span>: <span style="color:#66d9ef">center</span>;
</span></span><span style="display:flex;"><span>}
</span></span><span style="display:flex;"><span>.<span style="color:#a6e22e">clock-container</span>{
</span></span><span style="display:flex;"><span>    backdrop-filter: blur(<span style="color:#ae81ff">5</span><span style="color:#66d9ef">px</span>);
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">width</span>: <span style="color:#ae81ff">100</span><span style="color:#66d9ef">vw</span>;
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">padding</span>: <span style="color:#ae81ff">10</span><span style="color:#66d9ef">px</span> <span style="color:#ae81ff">0</span>;
</span></span><span style="display:flex;"><span>}
</span></span><span style="display:flex;"><span>.<span style="color:#a6e22e">clock</span>{
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">color</span>: <span style="color:#66d9ef">white</span>;
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">font-size</span>: <span style="color:#ae81ff">6</span><span style="color:#66d9ef">rem</span>;
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">font-weight</span>: <span style="color:#66d9ef">bold</span>;
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">font-family</span>: <span style="color:#66d9ef">monospace</span>;
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">text-align</span>: <span style="color:#66d9ef">center</span>;
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">text-shadow</span>: <span style="color:#ae81ff">3</span><span style="color:#66d9ef">px</span> <span style="color:#ae81ff">3</span><span style="color:#66d9ef">px</span> <span style="color:#ae81ff">5</span><span style="color:#66d9ef">px</span> hsla(<span style="color:#ae81ff">0</span>, <span style="color:#ae81ff">0</span><span style="color:#66d9ef">%</span>, <span style="color:#ae81ff">0</span><span style="color:#66d9ef">%</span>, <span style="color:#ae81ff">0.75</span>);
</span></span><span style="display:flex;"><span>}
</span></span></code></pre></div><h3 id="第十八节">第十八节<a hidden class="anchor" aria-hidden="true" href="#第十八节">#</a></h3>
<p>useContext() hook</p>
<p>为避免 props drilling 的复杂操作</p>
<p>导出文件:</p>
<p><img alt="image-20250503222801379" loading="lazy" src="./attachments/image-20250503222801379.png"></p>
<p>导入文件:</p>
<p><img alt="image-20250503223601077" loading="lazy" src="./attachments/image-20250503223601077.png"></p>
<h3 id="第十九节">第十九节<a hidden class="anchor" aria-hidden="true" href="#第十九节">#</a></h3>
<p>useRef() hook: 不会引发rerender(重新渲染)的useState()</p>
<p>虽然ref的current property 改变了但是没有重新渲染</p>
<p><img alt="image-20250504104909444" loading="lazy" src="./attachments/image-20250504104909444.png"></p>
<p><img alt="image-20250504105955537" loading="lazy" src="./attachments/image-20250504105955537.png"></p>
<p><img alt="image-20250504110933429" loading="lazy" src="./attachments/image-20250504110933429.png"></p>
<h3 id="第二十节">第二十节<a hidden class="anchor" aria-hidden="true" href="#第二十节">#</a></h3>
<p>秒表项目, 使用{useState, useEffect, useRef}实现</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-react" data-lang="react"><span style="display:flex;"><span><span style="color:#66d9ef">import</span> <span style="color:#a6e22e">Stopwatch</span> <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;./Stopwatch.jsx&#39;</span>;
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">function</span> <span style="color:#a6e22e">App</span>() {
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">return</span> (&lt;<span style="color:#f92672">Stopwatch</span> /&gt;);
</span></span><span style="display:flex;"><span>}
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">export</span> <span style="color:#66d9ef">default</span> <span style="color:#a6e22e">App</span>;
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">import</span> <span style="color:#a6e22e">React</span>, {<span style="color:#a6e22e">useState</span>, <span style="color:#a6e22e">useEffect</span>, <span style="color:#a6e22e">useRef</span>} <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;react&#39;</span>;
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">function</span> <span style="color:#a6e22e">Stopwatch</span>(){
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">const</span> [<span style="color:#a6e22e">isRunning</span>, <span style="color:#a6e22e">setIsRunning</span>] <span style="color:#f92672">=</span> <span style="color:#a6e22e">useState</span>(<span style="color:#66d9ef">false</span>);
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">const</span> [<span style="color:#a6e22e">elapsedTime</span>, <span style="color:#a6e22e">setElapsedTime</span>] <span style="color:#f92672">=</span> <span style="color:#a6e22e">useState</span>(<span style="color:#ae81ff">0</span>);
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">intervalIdRef</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">useRef</span>(<span style="color:#66d9ef">null</span>);
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">startTimeRef</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">useRef</span>(<span style="color:#ae81ff">0</span>);
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">useEffect</span>(() =&gt; {
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>        <span style="color:#66d9ef">if</span>(<span style="color:#a6e22e">isRunning</span>){
</span></span><span style="display:flex;"><span>            <span style="color:#a6e22e">intervalIdRef</span>.<span style="color:#a6e22e">current</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">setInterval</span>(() =&gt; {
</span></span><span style="display:flex;"><span>                <span style="color:#a6e22e">setElapsedTime</span>(Date.<span style="color:#a6e22e">now</span>() <span style="color:#f92672">-</span> <span style="color:#a6e22e">startTimeRef</span>.<span style="color:#a6e22e">current</span>);
</span></span><span style="display:flex;"><span>            }, <span style="color:#ae81ff">10</span>);
</span></span><span style="display:flex;"><span>        }
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>        <span style="color:#66d9ef">return</span> () =&gt; {
</span></span><span style="display:flex;"><span>            <span style="color:#a6e22e">clearInterval</span>(<span style="color:#a6e22e">intervalIdRef</span>.<span style="color:#a6e22e">current</span>);
</span></span><span style="display:flex;"><span>        }
</span></span><span style="display:flex;"><span>    }, [<span style="color:#a6e22e">isRunning</span>]);
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">function</span> <span style="color:#a6e22e">start</span>(){
</span></span><span style="display:flex;"><span>        <span style="color:#a6e22e">setIsRunning</span>(<span style="color:#66d9ef">true</span>);
</span></span><span style="display:flex;"><span>        <span style="color:#a6e22e">startTimeRef</span>.<span style="color:#a6e22e">current</span> <span style="color:#f92672">=</span> Date.<span style="color:#a6e22e">now</span>() <span style="color:#f92672">-</span> <span style="color:#a6e22e">elapsedTime</span>;
</span></span><span style="display:flex;"><span>    }
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">function</span> <span style="color:#a6e22e">stop</span>(){
</span></span><span style="display:flex;"><span>        <span style="color:#a6e22e">setIsRunning</span>(<span style="color:#66d9ef">false</span>);
</span></span><span style="display:flex;"><span>    }
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">function</span> <span style="color:#a6e22e">reset</span>(){
</span></span><span style="display:flex;"><span>        <span style="color:#a6e22e">setElapsedTime</span>(<span style="color:#ae81ff">0</span>);
</span></span><span style="display:flex;"><span>        <span style="color:#a6e22e">setIsRunning</span>(<span style="color:#66d9ef">false</span>);
</span></span><span style="display:flex;"><span>    }
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">function</span> <span style="color:#a6e22e">formatTime</span>(){
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>        <span style="color:#66d9ef">let</span> <span style="color:#a6e22e">hours</span> <span style="color:#f92672">=</span> Math.<span style="color:#a6e22e">floor</span>(<span style="color:#a6e22e">elapsedTime</span> <span style="color:#f92672">/</span> (<span style="color:#ae81ff">1000</span> <span style="color:#f92672">*</span> <span style="color:#ae81ff">60</span> <span style="color:#f92672">*</span> <span style="color:#ae81ff">60</span>));
</span></span><span style="display:flex;"><span>        <span style="color:#66d9ef">let</span> <span style="color:#a6e22e">minutes</span> <span style="color:#f92672">=</span> Math.<span style="color:#a6e22e">floor</span>(<span style="color:#a6e22e">elapsedTime</span> <span style="color:#f92672">/</span> (<span style="color:#ae81ff">1000</span> <span style="color:#f92672">*</span> <span style="color:#ae81ff">60</span>) <span style="color:#f92672">%</span> <span style="color:#ae81ff">60</span>);
</span></span><span style="display:flex;"><span>        <span style="color:#66d9ef">let</span> <span style="color:#a6e22e">seconds</span> <span style="color:#f92672">=</span> Math.<span style="color:#a6e22e">floor</span>(<span style="color:#a6e22e">elapsedTime</span> <span style="color:#f92672">/</span> (<span style="color:#ae81ff">1000</span>) <span style="color:#f92672">%</span> <span style="color:#ae81ff">60</span>);
</span></span><span style="display:flex;"><span>        <span style="color:#66d9ef">let</span> <span style="color:#a6e22e">milliseconds</span> <span style="color:#f92672">=</span> Math.<span style="color:#a6e22e">floor</span>((<span style="color:#a6e22e">elapsedTime</span> <span style="color:#f92672">%</span> <span style="color:#ae81ff">1000</span>) <span style="color:#f92672">/</span> <span style="color:#ae81ff">10</span>);
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>        <span style="color:#a6e22e">hours</span> <span style="color:#f92672">=</span> String(<span style="color:#a6e22e">hours</span>).<span style="color:#a6e22e">padStart</span>(<span style="color:#ae81ff">2</span>, <span style="color:#e6db74">&#34;0&#34;</span>);
</span></span><span style="display:flex;"><span>        <span style="color:#a6e22e">minutes</span> <span style="color:#f92672">=</span> String(<span style="color:#a6e22e">minutes</span>).<span style="color:#a6e22e">padStart</span>(<span style="color:#ae81ff">2</span>, <span style="color:#e6db74">&#34;0&#34;</span>);
</span></span><span style="display:flex;"><span>        <span style="color:#a6e22e">seconds</span> <span style="color:#f92672">=</span> String(<span style="color:#a6e22e">seconds</span>).<span style="color:#a6e22e">padStart</span>(<span style="color:#ae81ff">2</span>, <span style="color:#e6db74">&#34;0&#34;</span>);
</span></span><span style="display:flex;"><span>        <span style="color:#a6e22e">milliseconds</span> <span style="color:#f92672">=</span> String(<span style="color:#a6e22e">milliseconds</span>).<span style="color:#a6e22e">padStart</span>(<span style="color:#ae81ff">2</span>, <span style="color:#e6db74">&#34;0&#34;</span>);
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>        <span style="color:#66d9ef">return</span> <span style="color:#e6db74">`</span><span style="color:#e6db74">${</span><span style="color:#a6e22e">minutes</span><span style="color:#e6db74">}</span><span style="color:#e6db74">:</span><span style="color:#e6db74">${</span><span style="color:#a6e22e">seconds</span><span style="color:#e6db74">}</span><span style="color:#e6db74">:</span><span style="color:#e6db74">${</span><span style="color:#a6e22e">milliseconds</span><span style="color:#e6db74">}</span><span style="color:#e6db74">`</span>;
</span></span><span style="display:flex;"><span>    }
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">return</span>(
</span></span><span style="display:flex;"><span>        &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">className</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;stopwatch&#34;</span>&gt;
</span></span><span style="display:flex;"><span>            &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">className</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;display&#34;</span>&gt;{<span style="color:#a6e22e">formatTime</span>()}&lt;/<span style="color:#f92672">div</span>&gt;
</span></span><span style="display:flex;"><span>            &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">className</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;controls&#34;</span>&gt;
</span></span><span style="display:flex;"><span>                &lt;<span style="color:#f92672">button</span> <span style="color:#a6e22e">onClick</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">start</span>} <span style="color:#a6e22e">className</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;start-button&#34;</span>&gt;<span style="color:#a6e22e">Start</span>&lt;/<span style="color:#f92672">button</span>&gt;
</span></span><span style="display:flex;"><span>                &lt;<span style="color:#f92672">button</span> <span style="color:#a6e22e">onClick</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">stop</span>} <span style="color:#a6e22e">className</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;stop-button&#34;</span>&gt;<span style="color:#a6e22e">Stop</span>&lt;/<span style="color:#f92672">button</span>&gt;
</span></span><span style="display:flex;"><span>                &lt;<span style="color:#f92672">button</span> <span style="color:#a6e22e">onClick</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">reset</span>} <span style="color:#a6e22e">className</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;reset-button&#34;</span>&gt;<span style="color:#a6e22e">Reset</span>&lt;/<span style="color:#f92672">button</span>&gt;
</span></span><span style="display:flex;"><span>            &lt;/<span style="color:#f92672">div</span>&gt;
</span></span><span style="display:flex;"><span>        &lt;/<span style="color:#f92672">div</span>&gt;
</span></span><span style="display:flex;"><span>    );
</span></span><span style="display:flex;"><span>}
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">export</span> <span style="color:#66d9ef">default</span> <span style="color:#a6e22e">Stopwatch</span>
</span></span></code></pre></div><div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-css" data-lang="css"><span style="display:flex;"><span><span style="color:#f92672">body</span>{
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">display</span>: <span style="color:#66d9ef">flex</span>;
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">flex-direction</span>: <span style="color:#66d9ef">column</span>;
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">align-items</span>: <span style="color:#66d9ef">center</span>;
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">background-color</span>: hsl(<span style="color:#ae81ff">0</span>, <span style="color:#ae81ff">0</span><span style="color:#66d9ef">%</span>, <span style="color:#ae81ff">95</span><span style="color:#66d9ef">%</span>);
</span></span><span style="display:flex;"><span>}
</span></span><span style="display:flex;"><span>.<span style="color:#a6e22e">stopwatch</span>{
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">display</span>: <span style="color:#66d9ef">flex</span>;
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">flex-direction</span>: <span style="color:#66d9ef">column</span>;
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">align-items</span>: <span style="color:#66d9ef">center</span>;
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">border</span>: <span style="color:#ae81ff">5</span><span style="color:#66d9ef">px</span> <span style="color:#66d9ef">solid</span>;
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">border-radius</span>: <span style="color:#ae81ff">50</span><span style="color:#66d9ef">px</span>;
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">background-color</span>: <span style="color:#66d9ef">white</span>;
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">padding</span>: <span style="color:#ae81ff">30</span><span style="color:#66d9ef">px</span>;
</span></span><span style="display:flex;"><span>}
</span></span><span style="display:flex;"><span>.<span style="color:#a6e22e">display</span>{
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">font-size</span>: <span style="color:#ae81ff">5</span><span style="color:#66d9ef">rem</span>;
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">font-family</span>: <span style="color:#66d9ef">monospace</span>;
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">font-weight</span>: <span style="color:#66d9ef">bold</span>;
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">color</span>: hsl(<span style="color:#ae81ff">0</span>, <span style="color:#ae81ff">0</span><span style="color:#66d9ef">%</span>, <span style="color:#ae81ff">30</span><span style="color:#66d9ef">%</span>);
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">text-shadow</span>: <span style="color:#ae81ff">2</span><span style="color:#66d9ef">px</span> <span style="color:#ae81ff">2</span><span style="color:#66d9ef">px</span> <span style="color:#ae81ff">2</span><span style="color:#66d9ef">px</span> hsla(<span style="color:#ae81ff">0</span>, <span style="color:#ae81ff">0</span><span style="color:#66d9ef">%</span>, <span style="color:#ae81ff">0</span><span style="color:#66d9ef">%</span>, <span style="color:#ae81ff">0.75</span>);
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">margin-bottom</span>: <span style="color:#ae81ff">25</span><span style="color:#66d9ef">px</span>;
</span></span><span style="display:flex;"><span>}
</span></span><span style="display:flex;"><span>.<span style="color:#a6e22e">controls</span> <span style="color:#f92672">button</span>{
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">font-size</span>: <span style="color:#ae81ff">1.5</span><span style="color:#66d9ef">rem</span>;
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">font-weight</span>: <span style="color:#66d9ef">bold</span>;
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">padding</span>: <span style="color:#ae81ff">10</span><span style="color:#66d9ef">px</span> <span style="color:#ae81ff">20</span><span style="color:#66d9ef">px</span>;
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">margin</span>: <span style="color:#ae81ff">5</span><span style="color:#66d9ef">px</span>;
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">min-width</span>: <span style="color:#ae81ff">125</span><span style="color:#66d9ef">px</span>;
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">border</span>: <span style="color:#66d9ef">none</span>;
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">border-radius</span>: <span style="color:#ae81ff">10</span><span style="color:#66d9ef">px</span>;
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">cursor</span>: <span style="color:#66d9ef">pointer</span>;
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">color</span>: <span style="color:#66d9ef">white</span>;
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">transition</span>: <span style="color:#66d9ef">background-color</span> <span style="color:#ae81ff">0.5</span><span style="color:#66d9ef">s</span> <span style="color:#66d9ef">ease</span>;
</span></span><span style="display:flex;"><span>}
</span></span><span style="display:flex;"><span>.<span style="color:#a6e22e">start-button</span>{
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">background-color</span>: hsl(<span style="color:#ae81ff">115</span>, <span style="color:#ae81ff">100</span><span style="color:#66d9ef">%</span>, <span style="color:#ae81ff">40</span><span style="color:#66d9ef">%</span>);
</span></span><span style="display:flex;"><span>}
</span></span><span style="display:flex;"><span>.<span style="color:#a6e22e">start-button</span>:<span style="color:#a6e22e">hover</span>{
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">background-color</span>: hsl(<span style="color:#ae81ff">115</span>, <span style="color:#ae81ff">100</span><span style="color:#66d9ef">%</span>, <span style="color:#ae81ff">35</span><span style="color:#66d9ef">%</span>);
</span></span><span style="display:flex;"><span>}
</span></span><span style="display:flex;"><span>.<span style="color:#a6e22e">stop-button</span>{
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">background-color</span>: hsl(<span style="color:#ae81ff">10</span>, <span style="color:#ae81ff">90</span><span style="color:#66d9ef">%</span>, <span style="color:#ae81ff">50</span><span style="color:#66d9ef">%</span>);
</span></span><span style="display:flex;"><span>}
</span></span><span style="display:flex;"><span>.<span style="color:#a6e22e">stop-button</span>:<span style="color:#a6e22e">hover</span>{
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">background-color</span>: hsl(<span style="color:#ae81ff">10</span>, <span style="color:#ae81ff">90</span><span style="color:#66d9ef">%</span>, <span style="color:#ae81ff">45</span><span style="color:#66d9ef">%</span>);
</span></span><span style="display:flex;"><span>}
</span></span><span style="display:flex;"><span>.<span style="color:#a6e22e">reset-button</span>{
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">background-color</span>: hsl(<span style="color:#ae81ff">205</span>, <span style="color:#ae81ff">90</span><span style="color:#66d9ef">%</span>, <span style="color:#ae81ff">60</span><span style="color:#66d9ef">%</span>);
</span></span><span style="display:flex;"><span>}
</span></span><span style="display:flex;"><span>.<span style="color:#a6e22e">reset-button</span>:<span style="color:#a6e22e">hover</span>{
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">background-color</span>: hsl(<span style="color:#ae81ff">205</span>, <span style="color:#ae81ff">90</span><span style="color:#66d9ef">%</span>, <span style="color:#ae81ff">55</span><span style="color:#66d9ef">%</span>);
</span></span><span style="display:flex;"><span>}
</span></span></code></pre></div>

  </div>

  <footer class="post-footer">
    <ul class="post-tags">
    </ul>

  </footer>
</article>
    </main>
    
<footer class="footer">
        <span>&copy; 2025 <a href="http://localhost:36288/">My New Hugo Site</a></span> · 

    <span>
        Powered by
        <a href="https://gohugo.io/" rel="noopener noreferrer" target="_blank">Hugo</a> &
        <a href="https://github.com/adityatelange/hugo-PaperMod/" rel="noopener" target="_blank">PaperMod</a>
    </span>
</footer>
<a href="#top" aria-label="go to top" title="Go to Top (Alt + G)" class="top-link" id="top-link" accesskey="g">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentColor">
        <path d="M12 6H0l6-6z" />
    </svg>
</a>

<script>
    let menu = document.getElementById('menu')
    if (menu) {
        menu.scrollLeft = localStorage.getItem("menu-scroll-position");
        menu.onscroll = function () {
            localStorage.setItem("menu-scroll-position", menu.scrollLeft);
        }
    }

    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener("click", function (e) {
            e.preventDefault();
            var id = this.getAttribute("href").substr(1);
            if (!window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
                document.querySelector(`[id='${decodeURIComponent(id)}']`).scrollIntoView({
                    behavior: "smooth"
                });
            } else {
                document.querySelector(`[id='${decodeURIComponent(id)}']`).scrollIntoView();
            }
            if (id === "top") {
                history.replaceState(null, null, " ");
            } else {
                history.pushState(null, null, `#${id}`);
            }
        });
    });

</script>
<script>
    var mybutton = document.getElementById("top-link");
    window.onscroll = function () {
        if (document.body.scrollTop > 800 || document.documentElement.scrollTop > 800) {
            mybutton.style.visibility = "visible";
            mybutton.style.opacity = "1";
        } else {
            mybutton.style.visibility = "hidden";
            mybutton.style.opacity = "0";
        }
    };

</script>
<script>
    document.getElementById("theme-toggle").addEventListener("click", () => {
        if (document.body.className.includes("dark")) {
            document.body.classList.remove('dark');
            localStorage.setItem("pref-theme", 'light');
        } else {
            document.body.classList.add('dark');
            localStorage.setItem("pref-theme", 'dark');
        }
    })

</script>
<script>
    document.querySelectorAll('pre > code').forEach((codeblock) => {
        const container = codeblock.parentNode.parentNode;

        const copybutton = document.createElement('button');
        copybutton.classList.add('copy-code');
        copybutton.innerHTML = 'copy';

        function copyingDone() {
            copybutton.innerHTML = 'copied!';
            setTimeout(() => {
                copybutton.innerHTML = 'copy';
            }, 2000);
        }

        copybutton.addEventListener('click', (cb) => {
            if ('clipboard' in navigator) {
                navigator.clipboard.writeText(codeblock.textContent);
                copyingDone();
                return;
            }

            const range = document.createRange();
            range.selectNodeContents(codeblock);
            const selection = window.getSelection();
            selection.removeAllRanges();
            selection.addRange(range);
            try {
                document.execCommand('copy');
                copyingDone();
            } catch (e) { };
            selection.removeRange(range);
        });

        if (container.classList.contains("highlight")) {
            container.appendChild(copybutton);
        } else if (container.parentNode.firstChild == container) {
            
        } else if (codeblock.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName == "TABLE") {
            
            codeblock.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(copybutton);
        } else {
            
            codeblock.parentNode.appendChild(copybutton);
        }
    });
</script>
</body>

</html>
